<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span>相册-{{ routedata.name }}</span>
                <div v-if="!istodelete">
                    <el-button type="success" :icon="Plus" size="small" @click="showdialog = true">添加</el-button>
                    <el-button type="primary" :icon="Edit" size="small" @click="istodelete = true">编辑</el-button>
                </div>
                <div v-else>
                    <el-button type="info" size="small" @click="cansoldelect">取消删除</el-button>
                    <el-button type="danger" :icon="Delete" size="small" @click="todelect">确定删除</el-button>
                </div>
            </div>
        </template>
        <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane label="相册图片" name="photolist">
                <div class="h-[30rem]  overflow-y-scroll ">
                    <span v-for="(item, index) in urllist" :key="index">
                        <el-checkbox v-model="item.ischecked" size="small" v-if="istodelete" />
                        <el-image style="width: 80px;height: 80px; margin: 5px; margin-bottom: 8px; " :src="item.url"
                            class="align-top" :preview-src-list="srcList" :preview-teleported="true" fit="cover" />
                    </span>
                </div>
            </el-tab-pane>
        </el-tabs>
        <pagination :currentPage="allcurrentPage" :pageSize="allpageSize" :total="alltotal" :loading="loading"
            @updatepage="Allchangepage"></pagination>
        <dialogg :istoshow="showdialog" title="添加照片" @cansol="cansol" width="28%">
            <template #body>
                <upload :limit="9" :multiple="true" :height="100" :width="100" v-model:imglist="addimglist"></upload>
            </template>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cansol">取消</el-button>
                    <el-button type="primary" @click="subandclose">
                        保存
                    </el-button>
                </span>
            </template>
        </dialogg>
    </el-card>
</template>

<script setup>
import { computed, onMounted, inject, ref } from 'vue';
import dialogg from '@/components/dialog.vue'
import upload from '../../components/upload.vue';
import { useBaseStore } from "@/store/Base.js"
import { uploadqiniu } from "@/util/index.js"
import { useRoute } from 'vue-router';
import { getQiniuToken } from "@/api/users.js"
import {
    Plus,
    Edit,
    Delete
} from '@element-plus/icons-vue'
import { addPic, getPic, alltotaldata, deletePic } from "@/api/photo.js"
const activeName = ref('photolist')
let baseStore = useBaseStore()
const route = useRoute();
let istodelete = ref(false)
let reload = inject('reload')
const routedata = ref(route.query);
/* 分页器的数据或者函数 */
const allcurrentPage = ref(1)
const allpageSize = ref(50)
const alltotal = ref(0)

let loading = ref(false)
function Allchangepage(val) {
    allcurrentPage.value = val;
}
let urllist = ref([

])
let addimglist = ref([]);
let srcList = computed(() => {
    return urllist.value.map(item => item.url)
})
let showdialog = ref(false)
async function getdata() {
    let ress = await alltotaldata(routedata.value.id)
    let res = await getPic({
        page: allcurrentPage.value,
        pageSize: allpageSize.value,
        aumble_id: routedata.value.id
    })
    let resdata = await Promise.all([ress, res])
    alltotal.value = resdata[0].data.data
    if (alltotal.value > 0) {
        urllist.value = resdata[1].data.data.map(item => {
            return {
                id: item.id,
                picAlbumid: item.album_id,
                url: item.url,
                ischecked: false,
            }
        })
    } else {
        ElMessage({
            message: '暂无数据',
            type: 'warning',
        })
        urllist.value = []

    }
}
onMounted(async () => {
    await getdata()
})
/* 取消提交相册 修改 或者 添加 */
function cansol() {
    addimglist.value = []
    showdialog.value = false
}
/* 提交 */
async function subandclose() {
    if (addimglist.value.length > 0) {
        let data = await getQiniuToken();
        if (data.data.status == 200) {
            baseStore.qiniuToken = data.data.data.uploadToken;
            let Checkuploadlist = await uploadqiniu(addimglist.value)
            let file_namelist = Checkuploadlist.map(item => {
                return {
                    album_id: routedata.value.id,
                    url: import.meta.env.VITE_API_PHOTO + item.data.key
                }
            })
            let res = await addPic({
                aumble_id: routedata.value.id,
                file_namelist
            })
            if (res.data.status == 200) {
                ElMessage({
                    message: '添加成功',
                    type: 'success',
                })
                showdialog.value = false
            } else {
                ElMessage({
                    message: '添加失败',
                    type: 'warning',
                })
            }
        }

    } else {
        return
    }
    showdialog.value = false
}
function cansoldelect() {
    addimglist.value.forEach((item) => {
        item.ischecked = false
    })
    istodelete.value = false
}
/* 删除图片批量 */
async function todelect() {
    let todelectIdlist = urllist.value.filter(item => item.ischecked).map(item => {
        return {
            url: item.url,
            id: item.id
        }
    })
    let data = {
        'todelectIdlist': todelectIdlist,
        'album_id': routedata.value.id
    }
    let res = await deletePic(data)
    if (res.data.status==200) {
        ElMessage({
            message: '删除成功',
            type: 'success',
        })
        cansoldelect()
        reload()
    } else {
        cansoldelect()
        ElMessage({
            message: '删除失败',
            type: 'warning',
        })

    }
    urllist.value.forEach(item=>{
        item.ischecked = false
    })
    istodelete.value = false
}

</script>


<style scoped>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

:deep(.el-card__header) {
    padding: 5px 15px !important;
}
</style>